<template>
	<view>
		<view class="tit">
			<image src="/static/bcg.png" mode=""></image>
			<view class="content">
				<view class="shuruk">
					<view class="flexs">
						<image src="../../static/d3.png" mode=""></image>
						<input type="text" placeholder-class="inputs" placeholder="请输入账号" v-model="params.username" />
					</view>
					<view class="flexs">
						<image src="../../static/d2.png" mode=""></image>
						<view class="inputflex">
							<input v-model="params.password" placeholder-class="inputs" :password="isshow"
								placeholder="请输入密码" />
							<view @click="isshow =!isshow"
								style="width: 80rpx;display: flex;justify-content: center;align-items: center;">
								<uni-icons color="#D1D1D6" :type="isshow?'eye-slash' : 'eye'" size="24"></uni-icons>
							</view>
						</view>
					</view>
					<view class="flexs">
						<image src="../../static/d2.png" mode=""></image>
						<view class="inputss" style="display: flex;align-items: center;">
							<input placeholder-class="inputs" v-model="params.code" placeholder="请输入验证码" />
							<image class="eimage" :src="codeimg" mode="" @click="getcode()"></image>
						</view>
					</view>
				</view>
				<view class="btn" @click="login">
					登录
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getlogin,
		getText,
		getUserinfo
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				showPwd: true,
				isshow: true,
				params: {
					username: '',
					password: '',
					code: '',
					uuid: ''
				},
				codeimg: ''
			};
		},
		onLoad() {
			this.getcode()
		},
		methods: {
			getcode() {
				getText().then(res => {
					this.codeimg = "data:image/gif;base64," + res.img;
					this.params.uuid = res.uuid
				})
			},
			login() {
				if (this.params.username == '') {
					uni.showToast({
						title: '请输入账号',
						duration: 2000,
						mask: false,
						icon: "none"
					})
					return
				}
				if (this.params.password == '') {
					uni.showToast({
						title: '请输入密码',
						duration: 2000,
						mask: false,
						icon: "none"
					})
					return
				}
				if (this.params.code == '') {
					uni.showToast({
						title: '请输入验证码',
						duration: 2000,
						mask: false,
						icon: "none"
					})
					return
				}
				uni.showLoading({
					title: '登录中...',
					mask: true
				})
				getlogin(this.params).then(res => {
					if (res.code == 200) {
						uni.setStorageSync('username', this.params.username)
						uni.setStorageSync('password', this.params.password)
						uni.setStorageSync('token', res.token)
						uni.hideLoading()
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.tit {
		image {
			width: 750rpx;
			height: 510rpx;
		}

	}

	.content {
		position: relative;
		width: 100%;
		margin-top: -100rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 40rpx;
		box-sizing: border-box;

		.btn {
			width: 670rpx;
			height: 100rpx;
			background: #3658FF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 150rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}

	}

	.shuruk {
		z-index: 2;
		margin-top: 50rpx;

		.flexs {
			width: 680rpx;
			height: 110rpx;
			border: 2rpx solid #E7E7E7;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			padding: 30rpx;
			margin-bottom: 43rpx;
			box-sizing: border-box;
		}

		.inputss {
			flex: 1;
			.eimage {
				width: 192rpx;
				height: 82rpx;
			}
		}
		.inputflex {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		input {
			flex: 1;
			font-size: 28rpx;
		}
		.inputs {
			font-size: 28rpx;
			color: #D1D1D6;
		}
		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}
	}
</style>